<template>
    <div class="user-avatar">
        <el-card class="box-card">
        <div slot="header" class="clearfix">
        <span>更换头像</span>
        </div>
        <div>
        <!-- 图片，用来展示用户选择的头像 -->
        <img :src="avatar" alt="" style="width:350px;"  v-if="avatar"/>
        <img src="../../assets/images/avatar.jpg" alt=""  v-else />

        <!-- 按钮区域 -->
        <div class="btn-box">
            <input type="file" style="display:none;" ref="refIpt" @change="onIptChange">
            <el-button type="primary" icon="el-icon-plus" @click="chooseImg">选择头像</el-button>
            <el-button type="success" icon="el-icon-upload" :disabled="avatar===''"  @click="upLoadAvatar">上传图片</el-button>
            <br>

        </div>
            </div>
        </el-card>

    </div>
</template>

<script>
import { updateAvatar } from '@/api/user'
export default {
  name: 'UserAvatar',
  data () {
    return {
      // 声明一个变量存储转好的base64进制
      avatar: ''
    }
  },
  methods: {
    // 点击button触发input点击事件
    chooseImg () {
      this.$refs.refIpt.click()
      // console.log(this.$store.state.user.userInfo.user_pic)
    },
    // input内容改变事件
    // e拿到事件对象
    onIptChange (e) {
      // e.target.files是个伪数组/可以通过长度判断用户是否选择了图片
      if (e.target.files.length === 0) {
        // 点击了取消了,就恢复默认图片
        this.avatar = ''
      } else {
        // FileReader 浏览器提供的方法
        const reader = new FileReader()
        // reader里面有个方法readAsDataURL 可以将图片转base64进制
        reader.readAsDataURL(e.target.files[0])
        // onload可以监听转换完成后
        reader.onload = () => {
        // 给声明变量赋值
          this.avatar = reader.result
        }
      }
    },
    // 点击上传头像
    async  upLoadAvatar () {
      // 发送axios 上传
      const res = await updateAvatar(this.avatar)
      // 判断业务状态码是否上传成功给出提示
      if (res.code !== 0) return this.$message.error(res.message)
      console.log(res)
      this.$message.success(res.message)
      // 上传成功发送重新发送axios获取最新用户信息
      this.$store.dispatch('user/changeAvatar', this.avatar)
    }
  }

}
</script>
<style lang="less" scoped>
.user-avatar{
  // 头部
  .box-card{
  padding: 0px 30px;
  background: #FFFFFF;
    .clearfix{
      display: flex;
      justify-content: space-between;
      align-items: center;

      height: 70px;
      background: #FFFFFF;
      border-radius: 4px 4px 0px 0px;
      span{
        font-size: 18px;
        color: #131523;
        font-weight: 700;
      }
    }
  }
}
</style>
